<template>
  <div>
    <transition
      name="fade"
      @before-enter="handleBeforeEnter"
      @enter="handleEnter"
      @after-enter="handleAfterEnter"
    >
      <div v-show="show">Hello world</div>
    </transition>
<!--    @before-enter 动画的钩子函数
before-leave
leave
after-leave
-->
    <button @click="handleClick">toggle</button>
  </div>
</template>

<script>
export default {
  name: 'velocity',
  data () {
    return {
      show: true
    }
  },
  methods: {
    handleClick () {
      this.show = !this.show
    },
    handleBeforeEnter (el) {
      // el代表的是transition包裹的这个元素
      // el.style.color = 'red';

      // velocity
      el.style.opacity = 0
    },
    handleEnter (el, done) {
      // done为回调函数
      // setTimeout(() =>{
      //   el.style.color = 'green'
      // },2000);
      //   setTimeout(()=>{
      //     done()//enter事件已经执行完
      //   },4000)

      // velocity
      // eslint-disable-next-line no-undef
      Velocity(el, { opacity: 1 },
        {
          duration: 1000,
          complete: done
        })
      // complete属性的意思是，当velocity这个动画执行完毕之后complete对应的内容会被自动执行
    },
    handleAfterEnter (el) {
      // el.style.color = '#000'
      console.log('动画结束')
    }
  }
}
</script>

<style scoped>

</style>
